<template>
  <div class="app-container" :loading="submitLoading">
    <div class="filter-container">
      <div style="align-items: center;display: flex;">
        <div>
          <el-input v-model="listQuery.keyword" placeholder="搜索关键字" clearable></el-input>
        </div>
        <div>
          <el-date-picker prefix-icon="none" v-model="listQuery.searchTime" type="datetimerange"
            :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            align="right" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
        </div>
        <div style="width: 110px;">
          <el-select v-model="listQuery.is_archives" placeholder="请选择" @change="selet()">
              <el-option
                v-for="item in listQuery.guajie"
                :key="item.is_archives"
                :label="item.name"
                :value="item.is_archives">
              </el-option>
          </el-select>
        </div>
        <div style="width: 130px;">
          <el-select v-model="listQuery.type" placeholder="请选择" @change="selets()">
              <el-option
                v-for="item in listQuery.jiesuan"
                :key="item.type"
                :label="item.name"
                :value="item.type">
              </el-option>
          </el-select>
        </div>
        <div style="width: 110px;">
          <el-select v-model="listQuery.has_invoice" placeholder="请选择" @change="selets()">
              <el-option
                v-for="item in listQuery.invoice"
                :key="item.has_invoice"
                :label="item.name"
                :value="item.has_invoice">
              </el-option>
          </el-select>
        </div>
        <div style="width: 110px;">
          <el-select v-model="listQuery.has_backmoney" placeholder="请选择" @change="selets()">
              <el-option
                v-for="item in listQuery.backmoney"
                :key="item.has_backmoney"
                :label="item.name"
                :value="item.has_backmoney">
              </el-option>
          </el-select>
        </div>
        <el-button type="primary" icon="el-icon-search" @click="searchList()">
          搜索
        </el-button>
        <el-button type="primary" icon="el-icon-refresh-right"  @click="Refresh()">
          刷新
        </el-button>
      </div>
    </div>
    <!-- 列表-->
    <el-table :data="list" v-loading="listLoading" border style="width: 100%;" @selection-change="changeFun">
      <el-table-column
        type="selection" align="center">
       </el-table-column>
      <el-table-column label="id" prop="id" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结算单号" align="left">
        <template slot-scope="scope">
          <span class="link-type" @click="list_detail(scope)">
              {{scope.row.statement_num}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="合同标题" align="center" width="150">
        <template slot-scope="scope">
          <span class="link-type" @click="title_detail(scope)">
            {{scope.row.contract_title}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="合同编号" align="center">
        <template slot-scope="{row}">
          <span>{{ row.contract_num}}</span>
        </template>
      </el-table-column>
      <el-table-column label="结算单总额" align="center">
        <template slot-scope="{row}">
          <span>{{row.total_price}}</span>
        </template>
      </el-table-column>
      <el-table-column label="开票金额" align="center">
        <template slot-scope="{row}">
          <span>{{ row.invoice_price}}</span>
        </template>
      </el-table-column>
      <el-table-column label="回款金额" align="center">
       <template slot-scope="{row}">
         <span>{{ row.back_price}}</span>
       </template>
      </el-table-column>
      <el-table-column label="回款进度" align="center">
        <template slot-scope="{row}">
          <el-progress :text-inside="true" :stroke-width="26" :percentage="row.progress"></el-progress>
        </template>
      </el-table-column>
      <el-table-column label="类型" align="center">
        <template slot-scope="{row}">
          <span>{{ row.type_str}}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="{row}">
          <span>{{ row.add_time_str}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="备注" align="center">
        <template slot-scope="{row}">
          <span>{{ row.remark}}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" align="center" width="120">
        <template scope='scope'>
          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <el-button size="mini" icon="el-icon-edit" type="success" @click="edit(scope)">
              <!-- 修改 -->
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <el-popconfirm title="确定删除吗？" @onConfirm="list_del(scope)">
              <el-button slot="reference" style="margin-left: 10px;" size="mini" icon="el-icon-delete" type="danger">
                <!-- 删除 -->
              </el-button>
            </el-popconfirm>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="详情" :visible.sync="dialogVisible" width="50%" center>
      <div>
        <el-form ref="diary_details" :model="diary_details" label-width="80px"
          style="text-align: left;">
          <el-form-item label="标题:">
            <div>{{diary_details.title}}</div>
          </el-form-item>
          <el-form-item label="内容:">
            {{diary_details.content}}
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 开发票 -->
    <el-dialog title="开发票" :visible.sync="popup_edit_show" width="50%" center>
      <div>
        <el-table
            :data="list"
            border
            style="width: 100%"
            >
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              label="项目号"
              width="120">
              <template scope="scope">
                <div>
                  {{scope.id}}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="项目名称"
              width="120">
                <template scope="scope">
                  <div>
                    {{scope.id}}
                  </div>
                </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="业务类型"
              show-overflow-tooltip>
              <template scope="scope">
                <div>
                  {{scope.id}}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="工作量"
              show-overflow-tooltip>
              <template scope="scope">
                <div>
                  {{scope.id}}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="单价"
              show-overflow-tooltip>
              <template scope="scope">
                <div>
                  {{scope.id}}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="总价"
              show-overflow-tooltip>
              <template scope="scope">
                <div>
                  {{scope.id}}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="付款结算状态"
              show-overflow-tooltip>
              <template scope="scope">
                <div>
                  {{scope.id}}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="付款结算单位"
              show-overflow-tooltip>
              <template scope="scope">
                <div>
                  {{scope.id}}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="备注"
              show-overflow-tooltip>
              <template scope="scope">
                <div>
                  {{scope.id}}
                </div>
              </template>
            </el-table-column>
          </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="popup_edit_show = false">取 消</el-button>
        <el-button type="primary" @click="popup_edit_show = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页-->
    <div class="fenye">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="listQuery.page" :page-sizes="[10, 20, 30, 40]" :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper" :total="page_count">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import {
    statement_peihe_list,
    statement_del
  } from '@/api/jiesuan/jiesuan_list/peihe_jiesuan'
  export default {
    name: 'jiesuan_list_peihe_jiesuan',
    data() {
      return {
        ruleForm: {
          title: '',
          content: '',
          sort: 0,
          is_top: false
        },
        rules: {
          title: [{
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          }]
        },
        listLoading: 0,
        submitLoading: false,
        popup_edit_show: false,
        popup_add_show: false,
        diary_details: {},
        dialogVisible: false,
        list: null,

        listQuery: {
          guajie:[
            {'name':"全部/归档","is_archives":"-1"},
            {'name':"已归档","is_archives":"1"},
            {'name':"未归档","is_archives":"0"}
          ],
          is_archives:"0",

          jiesuan:[
            {'name':"全部结算单","type":"-1"},
            {'name':"准结算单","type":"1"},
            {'name':"最终结算单","type":"3"}
          ],
          type:"-1",

          invoice:[
            {'name':"全部发票","has_invoice":"-1"},
            {'name':"有发票","has_invoice":"1"},
            {'name':"无发票","has_invoice":"0"}
          ],
          has_invoice:"-1",

          backmoney:[
            {'name':"全部回款","has_backmoney":"-1"},
            {'name':"有回款","has_backmoney":"1"},
            {'name':"无回款","has_backmoney":"0"}
          ],
          has_backmoney:"-1",
          page: 1,
          limit: 10,
          keyword: "",
          searchTime: []
        },
        //分页总数据
        page_count:0,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }],
        }
      }
    },
    created() {
      this.getList()
    },
    mounted() {

    },
    methods: {
      Refresh(){
        this.listQuery.keyword=""
        this.listQuery.limit=10
        this.listQuery.page=1
        this.listQuery.has_backmoney="-1"
        this.listQuery.has_invoice="-1"
        this.listQuery.is_archives="0"
        this.listQuery.type="-1"
        this.getList()
      },
      selets(e){
        this.getList()
      },
      selet(e){
        this.getList()
      },
      // 获取列表数据
      getList(page, limit, listQuery) {

        page = page || this.listQuery.page;
        limit = limit || this.listQuery.limit;
        //定义listquery，为了下方可以使用key_word.....
        listQuery = listQuery || this.listQuery;
        let keyWord = listQuery.keyword || "";

        let searchTime =
          listQuery.searchTime && listQuery.searchTime.length > 0
            ? listQuery.searchTime[0] + "," + listQuery.searchTime[1]
            : "";
        this.listLoading = true;
        this.listQuery.search_time = searchTime
        statement_peihe_list(this.listQuery).then((res) => {
          this.list = res.data.list;
          this.page_count = res.count;
          this.listLoading = false;
        });
      },
      //搜索事件
      searchList() {
        this.listQuery.page=1
        this.getList()
      },
      //每页几条数据
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.listQuery.limit = val
        this.getList();
      },
      //跳转到
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.listQuery.page = val
        this.getList();
      },
      //新增数据提交
      submit_add() {
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            this.submitLoading = true
            notice_add(this.ruleForm.title, this.ruleForm.content, this.ruleForm.is_top, this.ruleForm.sort).then(
              res => {
                if (res.code == 200) {
                  this.$message({
                    message: res.msg,
                    type: 'success'
                  });
                  this.getList(this.currentPage,this.page_limit,this.listQuery)
                  this.popup_add_show = false
                  this.submitLoading = false
                  this.ruleForm.title = ""
                  this.ruleForm.content = ""
                  this.ruleForm.sort = 0
                  this.ruleForm.is_top = false
                }
              }).catch(() => {
              this.submitLoading = false
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      list_del(val) {
        let that = this
        statement_del(val.row.id).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.getList()
          }
        })
      },
      list_detail(val) {
        let that = this
        that.$router.push({
          path:"detail",
          query:{
            statement_id:val.row.id
          }
        })
      },
      title_detail(val){
        this.$router.push({
          path:"/jiesuan/contract/detail",
          query:{
            contract_id:val.row.id
          }
        })
      },
      add(val) {
        this.ruleForm.is_top = false
        this.popup_add_show = true
      },
      edit(val) {
        this.$router.push({
          path:"edit",
          query:{
            statement_id:val.row.id
          }
        })
        // this.diary_details = val
        // this.ruleForm.is_top = val.is_top ? true : false
        // this.popup_edit_show = true
      },
      submit_edit() {
        let that = this
        this.$refs.diary_details.validate((valid) => {
          if (valid) {
            console.log(that.diary_details, "fff")
            that.diary_details.is_top = that.diary_details.is_top?1:0
            that.submitLoading = true
            notice_edit(that.diary_details.id, that.ruleForm.is_top, that.diary_details.title, that.diary_details
              .content, that.diary_details.sort).then(res => {
              if (res.code == 200) {
                that.popup_edit_show = false
                that.submitLoading = false
                that.getList(this.currentPage,this.page_limit,this.listQuery)
              }
            })
          } else {
            console.log("输入框错误")
          }
        })
      },
      //复选框状态改变
      changeFun(val) {
        this.list_elections= val;
        console.log(val)
      },
    }
  }
</script>
<style type="text/css">
  .sortable-ghost {
    opacity: .8;
    color: #fff !important;
    background: #42b983 !important;
  }

  .fenye {
    padding: 20px 0px;
  }

  .el-range-editor.el-input__inner {
    width: 230px !important;
    padding: 3px 3px !important;
  }
</style>
